<template>
  <div class="page-content">
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/profile" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">帮助中心</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4">
      <!-- <div class="bg-white rounded-xl shadow-md p-4 mb-6">
        <div class="relative">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索问题..."
            class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <i
            class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
          ></i>
        </div>
      </div> -->

      <!-- <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">常见问题</h2>
        </div>
        <div class="divide-y divide-gray-100">
          <div
            v-for="faq in filteredFaqs"
            :key="faq.id"
            class="p-4 cursor-pointer hover:bg-gray-50"
            @click="toggleFaq(faq.id)"
          >
            <div class="flex items-center justify-between">
              <h3 class="font-medium">{{ faq.question }}</h3>
              <i
                :class="
                  expandedFaqs.includes(faq.id)
                    ? 'fas fa-chevron-up'
                    : 'fas fa-chevron-down'
                "
                class="text-gray-400"
              ></i>
            </div>
            <div
              v-if="expandedFaqs.includes(faq.id)"
              class="mt-3 text-sm text-gray-600"
            >
              <p>{{ faq.answer }}</p>
            </div>
          </div>
        </div>
      </div> -->

      <!-- <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">使用指南</h2>
        </div>
        <div class="p-4 space-y-4">
          <div
            v-for="guide in guides"
            :key="guide.id"
            class="border rounded-lg p-4"
          >
            <div class="flex items-center mb-3">
              <div
                class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3"
              >
                <span class="text-blue-600 font-bold text-sm">{{
                  guide.id
                }}</span>
              </div>
              <h3 class="font-medium">{{ guide.title }}</h3>
            </div>
            <p class="text-sm text-gray-600 mb-3">{{ guide.description }}</p>
            <div class="flex items-center space-x-2">
              <button
                @click="viewGuide(guide)"
                class="text-blue-600 hover:text-blue-800 text-sm"
              >
                查看详情
              </button>
              <span class="text-gray-400">|</span>
              <span class="text-sm text-gray-500"
                >{{ guide.duration }}分钟</span
              >
            </div>
          </div>
        </div>
      </div> -->

      <!-- 联系客服 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">联系客服</h2>
        </div>
        <div class="p-4 space-y-4">
          <!-- <div class="flex items-center p-3 bg-gray-50 rounded-lg">
            <div
              class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"
            >
              <i class="fas fa-comments text-green-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">在线客服</h3>
              <p class="text-sm text-gray-500">工作时间：9:00-18:00</p>
            </div>
            <button
              @click="contactService"
              class="text-blue-600 hover:text-blue-800"
            >
              立即咨询
            </button>
          </div> -->
          <div class="flex items-center p-3 bg-gray-50 rounded-lg">
            <div
              class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"
            >
              <i class="fas fa-envelope text-blue-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">邮件支持</h3>
              <p class="text-sm text-gray-500">support@example.com</p>
            </div>
            <button
              @click="sendEmail"
              class="text-blue-600 hover:text-blue-800"
            >
              发送邮件
            </button>
          </div>
          <div class="flex items-center p-3 bg-gray-50 rounded-lg">
            <div
              class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"
            >
              <i class="fas fa-phone text-purple-600"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">电话支持</h3>
              <p class="text-sm text-gray-500">400-123-4567</p>
            </div>
            <button
              @click="callService"
              class="text-blue-600 hover:text-blue-800"
            >
              拨打电话
            </button>
          </div>
        </div>
      </div>

      <!-- 反馈建议 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div class="p-4 border-b border-gray-100">
          <h2 class="text-lg font-semibold">反馈建议</h2>
        </div>
        <div class="p-4">
          <textarea
            v-model="feedback"
            placeholder="请描述您遇到的问题或建议..."
            class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            rows="4"
          ></textarea>
          <div class="mt-4 flex space-x-2">
            <button
              @click="submitFeedback"
              class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
            >
              提交反馈
            </button>
            <button
              @click="clearFeedback"
              class="px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50"
            >
              清空
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "Help",
  data() {
    return {
      searchQuery: "",
      expandedFaqs: [],
      feedback: "",
      faqs: [
        {
          id: 1,
          question: "如何使用诉状转换功能？",
          answer:
            "诉状转换功能可以将传统的诉状格式转换为要素式诉状。您只需要上传原始诉状文件，系统会自动识别并转换为要素式格式。",
        },
        {
          id: 2,
          question: "支持哪些文件格式？",
          answer:
            "我们支持Word文档(.docx)、PDF文件(.pdf)和文本文件(.txt)格式。建议使用Word文档以获得最佳转换效果。",
        },
        {
          id: 3,
          question: "如何升级会员？",
          answer:
            '在个人中心页面点击"会员中心"，选择适合您的套餐并完成支付即可升级会员。',
        },
        {
          id: 4,
          question: "生成的文件可以保存多久？",
          answer:
            "普通用户生成的文件保存7天，VIP会员保存30天，钻石会员保存90天。建议及时下载保存重要文件。",
        },
        {
          id: 5,
          question: "如何修改个人信息？",
          answer:
            '在个人中心页面点击"编辑"按钮，可以修改您的姓名、手机号等个人信息。',
        },
      ],
      guides: [
        {
          id: 1,
          title: "快速入门",
          description: "了解基本功能和使用流程",
          duration: 5,
        },
        {
          id: 2,
          title: "诉状转换详解",
          description: "详细说明诉状转换的使用方法和注意事项",
          duration: 10,
        },
        {
          id: 3,
          title: "模板使用指南",
          description: "如何使用和自定义诉状模板",
          duration: 8,
        },
        {
          id: 4,
          title: "高级功能",
          description: "会员专享功能的使用说明",
          duration: 12,
        },
      ],
    };
  },
  computed: {
    filteredFaqs() {
      if (!this.searchQuery) {
        return this.faqs;
      }
      return this.faqs.filter(
        (faq) =>
          faq.question.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          faq.answer.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
  },
  methods: {
    toggleFaq(id) {
      const index = this.expandedFaqs.indexOf(id);
      if (index > -1) {
        this.expandedFaqs.splice(index, 1);
      } else {
        this.expandedFaqs.push(id);
      }
    },
    viewGuide(guide) {
      console.log("查看指南:", guide.title);
      // 这里可以跳转到详细的指南页面
    },
    contactService() {
      console.log("联系在线客服");
      alert("正在为您连接在线客服...");
    },
    sendEmail() {
      console.log("发送邮件");
      window.open("mailto:support@example.com");
    },
    callService() {
      console.log("拨打电话");
      window.open("tel:400-123-4567");
    },
    submitFeedback() {
      if (!this.feedback.trim()) {
        alert("请输入反馈内容");
        return;
      }
      console.log("提交反馈:", this.feedback);
      alert("感谢您的反馈，我们会认真处理！");
      this.feedback = "";
    },
    clearFeedback() {
      this.feedback = "";
    },
  },
};
</script>
